<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>在线用户</el-breadcrumb-item>
    </el-breadcrumb>

      <div style="margin-top: 15px;margin-bottom: 15px;">
      <el-button v-if="this.actions.includes('3')" type="success" icon="HMS el-icon-mieba" title="随机踢出一半在线用户" @click="mieba()">灭霸模式</el-button>
    </div>
    <el-card>
      <el-table :data="this.onlineUserList" border stripe >
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column label="姓名" prop="userName" align="center"></el-table-column>
        <el-table-column label="部门" align="center">
          <template slot-scope='scope'>
            <el-tag type="success" >{{ scope.row.deptName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="登陆地址" prop="loginAddr" align="center"></el-table-column>
        <el-table-column label="登陆时间" prop="loginTime" align="center"></el-table-column>
        <el-table-column v-if="this.actions.includes('2')" label="操作" prop="username" align="center">
            <template slot-scope='scope'>
                <el-button type="danger" @click="kickout(scope.row.sessionId,scope.row.userName,scope.row.userId)" icon="HMS el-icon-tuichu" >下 线</el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 该页面的操作权限
      actions: this.$store.getters.actions['/onlineUser'],
      totalUser: 0,
      onlineUserList: [],
      currentSession: ''
    }
  },
  created () {
    this.getUserList()
    // console.log(this.$store.getters.routers)
  },
  methods: {
    getUserList () {
      this.$api.user.getOnlineUser().then(res => {
        this.totalUser = res.data.total
        this.onlineUserList = res.data.userList
        this.currentSession = res.data.currentSession
        this.tips()
      })
    },
    mieba () {
      this.$confirm('灭霸模式会随机下线一半用户, 是否继续?', '删除提示', {
        confirmButtonText: '有点意思',
        cancelButtonText: '算求',
        type: 'warning'
      }).then(() => {  
          this.$api.user.kickoutOnlineUserMieba().then(res => {
        if (res.code === 200) {
            this.$message.success('世界和平')
            this.getUserList()
        }
      })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
      kickout (sessionId,name) {
      if(sessionId == this.currentSession){
        this.$message.error('你TM连自己都要踢?是个狼人,佩服佩服')
        return
      }
      this.$confirm('此操作将会把用户 ' + name + ' 踢下线, 是否继续?', '删除提示', {
        confirmButtonText: '踢了他,奥里给',
        cancelButtonText: '雅蔑蝶',
        type: 'warning'
      }).then(() => {  
        this.$api.user.kickoutOnlineUser(sessionId).then(res => {
        if (res.code === 200) {
            this.$message.success('踢人成功')
            this.getUserList()
        }
      })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    tips() {
        this.$notify({
          title: '在线人数',
          message: '当前在线人数为: ' + this.totalUser +' 人',
          type: 'success',
        });
      },
  }
}
</script>
<style lang="less" scoped>
</style>